
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<span style="font-size:18px;">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="attendance/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="attendance/css/commonly-used-show.css" />
    <script type="text/javascript" src="attendance/js/jquery.min.js"></script>
    <script type="text/javascript" src="attendance/js/bootstrap.js" ></script>

    <title>打卡签到</title>

</head>

<body class="mybody">

<jsp:include page="theTopMenuUser.jsp" />

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <div class="text-center" id="left-content">
                <div class="list-group">
                    <a href="${pageContext.request.contextPath}/user" class="list-group-item active">首页</a>
                </div>
                <div class="list-group">
                    <a href="${pageContext.request.contextPath}/clockInClass" class="list-group-item">打卡签到</a>
                    <a href="${pageContext.request.contextPath}/attendanceRecord" class="list-group-item">考勤记录</a>
                    <a href="${pageContext.request.contextPath}/requestForAbsence" class="list-group-item">请假申请</a>
                    <a href="${pageContext.request.contextPath}/askForLeaveToSee" class="list-group-item">请假查看</a>

                </div>
            </div>
        </div>



        <div class="col-md-10">
            <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-body">
                            <div class="alert alert-success">

                                <div>
                                    <h3 style="text-align: center">打卡签到</h3>
                                    <hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color="#6f5999" size="3"/>

                                    <div style="margin-left: 360px; margin-right: 100px">
                                        <div style="border-radius: 50%; background: #9acfea; text-align: center; height: 300px; width: 300px">
                                            <label style="margin-top: 100px;">当前日期</label>
                                            <br>
                                            <label id="current_date">XXXX</label>
                                            <br>
                                            <label style="color: #0066FF; margin-top: 20px">当前时间</label>
                                            <br>
                                            <label id="present_time" style="color: #0066FF">XXXX</label>
                                        </div>
                                    </div>


                                    <div class="text-center" style="margin-top: 50px;">
                                        <div class="form-group">
                                            <input type="button" value="状态获取中" id="punch_card" class="btn btn-primary">
                                        </div>
                                        <div>
                                            <label id="user_null" style="color: red"></label>
                                        </div>
                                    </div>


                                </div>

                            </div>
                        </div>
                    </div>
                </div>
        </div>



    </div>

</div>




<script type="text/javascript">
    var userdt = JSON.parse(sessionStorage.getItem("user"));
    var coursely = JSON.parse(sessionStorage.getItem("course"));

    var userNull = document.getElementById("user_null");
    var cardId = "";
    var name = "";
    var attendState = "";
    var checking;

    if (userdt.result.userName != null){
        name = userdt.result.userName;
        $("#usname").text(name);

    }else {
        name = userdt.result.userLoginName
        $("#usname").text(name);
    }

    window.onload = function(){
        checkAttendance();
        checkRules();
    }

    function checkRules(){
        var postUrl = "${pageContext.request.contextPath}/member/seekClockRules";
        var str = {
            "userId": coursely.result.teacherId,
            "courseTitle": coursely.result.courseTitle
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    checking = data;
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }

    /*
    * 1，正常
    * 2，迟到
    * 3，请假
    * 4，请假
    * 5，缺卡
    *
    *
    *
    * */
    function checkAttendance(){
        var dately = new Date().Format("yyyy-MM-dd");

        var postUrl = "${pageContext.request.contextPath}/member/clockSelectDayAttendance";
        var str = {
            "userId": userdt.result.id,
            "startAttendDate": dately
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    $("#punch_card").val("上课打卡签到");
                    $("#punch_card").click(function(){
                        signIn();
                    });
                }else {
                    cardId = data.result.id
                    if (data.result.endAttendTime == null){
                        $("#punch_card").val("下课打卡签到");
                        $("#punch_card").click(function(){
                            signInes();
                        });
                    }else {
                        $("#punch_card").val("签到已完成");
                    }


                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }


    function signIn(){
        var datess = $("#current_date").text();
        var time = $("#present_time").text();

        var startTime = checking.result.startAttendTime;
        if(time < startTime){
            attendState = "1";
        }else if (time > startTime){
            attendState = "2";
        }


        var postUrl = "${pageContext.request.contextPath}/member/clockInsert";
        var str = {
            "userId": userdt.result.id,
            "userName": name,
            "startAttendDate": datess,
            "startAttendState": attendState,
            "courseId": coursely.result.id,
            "startAttendTime": time
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    //alert("添加用户成功")
                    location.href = "${pageContext.request.contextPath}/attendanceRecord";
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }

    function signInes(){
        var datess = $("#current_date").text();
        var time = $("#present_time").text();

        var endTime = checking.result.endAttendTime;
        if(time > endTime){
            attendState = "1";
        }else if (time < endTime){
            attendState = "3";
        }

        var postUrl = "${pageContext.request.contextPath}/member/clockClassUpdate";
        var str = {
            "id": cardId,
            "endAttendDate": datess,
            "endAttendState": attendState,
            "endAttendTime": time
        };

        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    userNull.innerHTML = data.msg;
                }else {
                    //alert("添加用户成功")
                    location.href = "${pageContext.request.contextPath}/attendanceRecord";
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }

    $(function(){
        setInterval("getTime();",1000); //每隔一秒执行一次
    })
    //取得系统当前时间
    function getTime(){
        var time2 = new Date().Format("yyyy-MM-dd hh:mm:ss");
        var dateTime = time2.split(" ");

        //截取yyyy-mm-dd
        var datees = dateTime[0];
        //截取hh:mm:ss
        var time = dateTime[1];

        $("#current_date").html(datees);
        $("#present_time").html(time);

    }

    Date.prototype.Format = function (fmt) { // author: meizz
        var o = {
            "M+": this.getMonth() + 1, // 月份
            "d+": this.getDate(), // 日
            "h+": this.getHours(), // 小时
            "m+": this.getMinutes(), // 分
            "s+": this.getSeconds(), // 秒
            "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
            "S": this.getMilliseconds() // 毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }


</script>

</body>
</html>
</span>